<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="business_map">
    <div class="left" v-if="!props.isView">
      <div class="database_item" v-for="item in databases" :id="item.id" :key="item" draggable="true" @dragstart="dragStart" @dragend="dragEnd">
        <img :src="dataBaseImg" alt="" />
        <div class="database_name">{{ item.name }}</div>
      </div>
    </div>
    <div class="right" :class="{ 'isView': props.isView }">
      <div class="card_item" v-for="(item, index) in cards" :key="item">
        <div class="close" v-if="!props.isView">
          <el-icon color="#a3a3a3" @click="deleteCard(item)"><CircleClose /></el-icon>
        </div>
        <div class="title">
          <div>{{ index + 1 }}</div>
          <el-tooltip :content="item.name" placement="top">
            <div>{{ item.name }}</div>
          </el-tooltip>
          <div v-if="!props.isView">
            <el-icon @click="modifyName(item)"><EditPen /></el-icon>
          </div>
        </div>
        <div class="content" @dragover="dragOver" @drop="drop" :id="item.index">
          <div class="database_item" v-for="(el, index) in item.databases" :id="index + 'el'" :key="el">
            <div class="close" v-if="!props.isView">
              <el-icon color="#a3a3a3" @click="deleteDataBase(item, el)"><CircleClose /></el-icon>
            </div>
            <img :src="dataBaseImg" alt="" />
            <div class="database_name">
              <a @click="showDataBaseInfo(el)">{{ el?.name }}</a>
            </div>
          </div>
        </div>
      </div>
      <div class="plus" v-if="!props.isView">
        <img :src="plus" alt="" @click="addCard" />
      </div>
    </div>
    <el-dialog title="步骤名称修改" v-model="visible">
      <el-form size="small">
        <el-form-item label="步骤名称：">
          <el-input v-model="formData.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="cancel()">取消</el-button>
          <el-button size="small" type="primary" @click="submit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <DataBaseView v-if="dataBaseVisible" :dataBaseVisible="dataBaseVisible" :data="currentDataBase" @handleEvent="handleEvent" />
  </div>
</template>
<script name="BusinessMap" setup>
import DataBaseView from './DataBaseView.vue';
import dataBaseImg from '@/assets/images/database.svg';
import plus from '@/assets/images/plus-square-fill.svg';
import { getDataBaseList } from '@/api/metaData/index';
const emit = defineEmits(['handleData']);
const props = defineProps(['isView', 'mapData']);
//左侧库列表
const dragTargetId = ref('');
const visible = ref(false);
const formData = ref({ name: '', index: '' });
const dataBaseVisible = ref(false);
const currentDataBase = ref(null);
const databases = ref([]);
const cards = ref([{ name: '步骤1', index: 1, databases: [] }]);
const handleEvent = () => {
  currentDataBase.value = null;
  dataBaseVisible.value = false;
};
//初始化数据
if (props?.mapData) {
  cards.value = [...props?.mapData];
}
//展示库类型详情
const showDataBaseInfo = (dataBase) => {
  currentDataBase.value = dataBase;
  dataBaseVisible.value = true;
};
const dragStart = (event) => {
  dragTargetId.value = event.target.id;
};
const dragEnd = (event) => {
  // 恢复拖拽元素的默认样式
  event.target.style.opacity = '1';
};
const dragOver = (event) => {
  event.preventDefault();
};
const drop = (event) => {
  // 阻止浏览器默认操作
  event.preventDefault();
  // 获取被拖动的元素数据
  const id = event.target.id;
  const databaseItem = databases.value.filter((item) => {
    return item.id == dragTargetId.value;
  });
  cards.value.forEach((card) => {
    if (card.index == id) {
      const itemDataBase = card.databases || [];
      let hasBase = false;
      if (itemDataBase.length > 0) {
        itemDataBase.forEach((el) => {
          if (el.id == dragTargetId.value) {
            hasBase = true;
          }
        });
      }
      if (hasBase) {
        ElMessage({ showClose: true, message: '已存在相同的库类型，请重新选择！', type: 'warning' });
        return;
      } else {
        card.databases.push(databaseItem[0]);
      }
    }
  });
  emit('handleData', { data: cards.value });
};
//增加卡片步骤
const addCard = () => {
  const ids = cards.value.map((card) => {
    return card.index;
  });
  const maxId = Math.max(...ids);
  cards.value.push({ name: '默认步骤', index: maxId + 1, databases: [] });
  emit('handleData', { data: cards.value });
};
// 删除卡片
const deleteCard = (card) => {
  if (cards.value.length === 1) {
    ElMessage({ showClose: true, message: '场景需至少保留一个步骤！', type: 'warning' });
    return;
  }
  ElMessageBox.confirm('是否确认删除此步骤？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    cards.value = cards.value.filter((el) => {
      return el.index != card.index;
    });
    cards.value.forEach((el) => {
      if (el.index > card.index) {
        el.index--;
      }
    });
  });
  emit('handleData', { data: cards.value });
};
// 删除库类型
const deleteDataBase = (card, dataBase) => {
  ElMessageBox.confirm('是否确认删除此库类型？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    cards.value.forEach((el) => {
      if (el.index == card.index) {
        if (el.databases.length > 0) {
          el.databases = el.databases.filter((item) => {
            return item.index != dataBase.index;
          });
        }
      }
    });
  });
  emit('handleData', { data: cards.value });
};
//修改卡片名称
const modifyName = (data) => {
  visible.value = true;
  formData.value.name = data.name;
  formData.value.index = data.index;
};
// 提交修改
const submit = () => {
  cards.value.forEach((el) => {
    if (el.index == formData.value.index) {
      el.name = formData.value.name;
    }
  });
  visible.value = false;
  emit('handleData', { data: cards.value });
};
// 取消
const cancel = () => {
  visible.value = false;
};
onMounted(() => {
  if (!props.isView) {
    getDataBaseList({ pageNum: 1, pageSize: 100, isAsc: 'descending' }).then((res) => {
      databases.value = res.rows || [];
    });
  }
});
</script>
<style lang="scss" scoped>
.business_map {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  user-select: none;
  .left {
    width: 240px;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #d9d9d9;
    align-content: baseline;
    .database_item {
      height: 60px;
      width: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #d9d9d9;
      justify-content: center;
      margin: 8px;
      border-radius: 4px;
      > img {
        height: 32%;
        width: 32px;
        pointer-events: none;
      }
      .database_name {
        font-size: 12px;
        margin-top: 6px;
        pointer-events: none;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        cursor: move;
        text-align: center;
      }
    }
  }
  .right {
    height: 100%;
    width: calc(100% - 250px);
    border: 1px solid #d9d9d9;
    padding: 10px;
    display: flex;
    overflow-x: auto;
    .card_item {
      height: 100%;
      min-width: 120px;
      margin-right: 10px;
      border: 1px solid #d9d9d9;
      background: #fcf8e9;
      border-radius: 8px;
      position: relative;
      .close {
        position: absolute;
        right: -5px;
        top: -5px;
        cursor: pointer;
      }
      .title {
        width: 100%;
        height: 40px;
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: center;
        > div:nth-child(1) {
          height: 20px;
          width: 20px;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          text-align: center;
          line-height: 20px;
        }
        > div:nth-child(2) {
          margin-left: 4px;
          max-width: 50px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        > div:nth-child(3) {
          margin-left: 4px;
          height: 20px;
          width: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
      .content {
        height: calc(100% - 50px);
        background: #fff;
        margin: 0 10px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: auto;
        .database_item {
          height: 60px;
          width: 60px;
          display: flex;
          flex-direction: column;
          align-items: center;
          border: 1px solid #d9d9d9;
          justify-content: center;
          margin: 8px;
          border-radius: 4px;
          position: relative;
          > img {
            height: 32%;
            width: 32px;
          }
          .database_name {
            font-size: 12px;
            margin-top: 6px;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            text-align: center;
          }
          .database_name:hover {
            text-decoration-line: underline;
            color: #409eff;
          }
          .close {
            position: absolute;
            right: -5px;
            top: -5px;
            cursor: pointer;
          }
        }
      }
    }
    .plus {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 20px;
      > img {
        height: 60px;
        width: 60px;
        cursor: pointer;
      }
    }
  }
  .isView {
    width: 100%;
  }
  :deep(.el-link__inner) {
    font-size: 12px;
  }
}
</style>
